import { reactive, ref } from "vue";
import dayjs from "dayjs";
import { loopTask } from "@/utils/timer";

export const useCountDown = (
  count: number,
  format: (n: number) => string,
  callback?: () => void
) => {
  const countDownData = reactive({ value: "", finish: true });
  const countDownStart = () => {
    let countDown = count;
    countDownData.value = format(countDown);
    countDownData.finish = false;
    countDownStop = loopTask((done, stop) => {
      countDown--;
      countDownData.value = format(countDown);
      if (countDown === 0) {
        countDownData.finish = true;
        stop();
        callback?.();
      } else {
        done();
      }
    }, 1000);
  };
  let countDownStop = () => {
    //
  };
  return { countDownData, countDownStart, countDownStop };
};

export const useClock = (format: (day: dayjs.Dayjs) => string) => {
  const day = ref();

  const clockStop = loopTask(
    (done) => {
      day.value = format(dayjs());
      done();
    },
    1000,
    true
  );
  return { day, clockStop };
};
